<template>
	<view class="step3-container">
		<view class="box">
			<view class="title no-border-bottom">配送信息</view>
			<view class="info-list">
				<view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.deliveried : 0}}</text>
					<text class="t">已发车</text>
				</view>
				<view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.toBedeliveried : 0}}</text>
					<text class="t">待发车</text>
				</view>
				<view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.verifiedWeight : 0}}<text class="tips">t</text></text>
					<text class="t">已收货</text>
				</view>
				<view class="item">
					<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.toBeverifiedWeight : 0}}<text class="tips">t</text></text>
					<text class="t">待收总量</text>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="title">{{detail.title}}</view>
			<view class="list">
				<view class="item">
					<text class="label">订单编号：</text>
					<text class="value u-line-1">{{detail.num}}</text>
				</view>
				<view class="item">
					<text class="label">物料类型：</text>
					<text class="value u-line-1">{{detail.skuName}}</text>
				</view>
				<view class="item">
					<text class="label">预算量：</text>
					<text class="value u-line-1">{{detail.totalBudget}}t</text>
				</view>
				<view class="item">
					<text class="label">卸货位置：</text>
					<text class="value u-line-1">{{detail.locationName}}</text>
				</view>
			</view>
		</view>
		<view class="car-box">
			<view class="title">
				<view :class="tabActive == index ? 'active' : ''" v-for="(item,index) in tabs" :key="index" @click="tabChange(index)">{{item.name}}</view>
			</view>
			<view class="all">共计：<text>{{carList.length}}</text>车</view>
		</view>
		<view class="car-list">
			<view class="item" v-for="(item,index) in carList" :key="index">
				<u-checkbox v-if="tabActive == 0" v-model="item.checked" shape="circle" @change="checkboxChange($event,index)"></u-checkbox>
				<view class="item-body" @click="showCarDetail(item)">
					<view class="item-hd">
						<text class="number">{{item.plateNumber}}</text>
					</view>
					<view class="item-bd">
						<view class="bd-l">
							<view>
								<text class="label">进磅：</text>
								<text class="value">{{item.grossWeight ? item.grossWeight + 't' : '-'}}</text>
								<text class="label">出磅：</text>
								<text class="value">{{item.tareWeight ? item.tareWeight + 't' : '-'}}</text>
								<text class="label">实重：</text>
								<text class="value">{{item.realWeight ? item.realWeight + 't' : '-'}}</text>
							</view>
						</view>
						<!-- <view class="bd-r" @click.stop="linkToEdit(index)" v-if="tabActive == 0">
							<u-icon name="edit-pen" color="#fff"></u-icon>
						</view> -->
					</view>
				</view>
				<view class="status" :class="item.status == 1 || item.status == 2 ? 'warning' : 'success'">{{item.status == 1 || item.status == 2 ? '待收货' : '已收货'}}</view>
			</view>
		</view>
		
		
		<view class="op-box" v-if="tabActive == 0">
			<u-checkbox shape="circle" v-model="checkall" @change="chackAll">全选</u-checkbox>
			<view class="btn-box">
				<view class="all">合计：<text>{{checkedbudget}}t</text></view>
				<view class="btn" @click="submit">一键收货</view>
			</view>
		</view>
		
		<!-- 弹出详情 -->
		<u-popup mode="center" border-radius="12" width="650" v-model="carDetailShow">
			<view class="cae-detail-name">{{truckDetail.plateNumber}}</view>
			<view class="car-detail-list">
				<text class="label">扫码时间：</text>
				<text class="value">{{truckDetail.scanTime}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">进磅时间：</text>
				<text class="value">{{truckDetail.entryTime || '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">进磅重量：</text>
				<text class="value">{{truckDetail.grossWeight ? truckDetail.grossWeight + 't' : '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">出磅时间：</text>
				<text class="value">{{truckDetail.outerTime || '-'}}</text>
			</view>
			<view class="car-detail-list">
				<text class="label">出磅重量：</text>
				<text class="value">{{truckDetail.tareWeight ? truckDetail.tareWeight + 't' : '-'}}</text>
			</view>
			
			<view class="car-detail-list">
				<text class="label">实际重量：</text>
				<text class="value">{{truckDetail.realWeight ? truckDetail.realWeight + 't' : '-'}}</text>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import config from "@/common/config.js"
	export default {
		mixins: [MescrollMixin],
		props:{
			orderId:{
				type: String,
				default: null
			},
			detail:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return{
				checkall:false,
				checkedbudget:0,
				carDetailShow:false,
				carList:[],
				Received:[], //已收货
				toReceive:[],//待收货
				truckDetail:null,
				upOption:{
					auto:false,
					empty:{
						tip:'暂无待收货车辆'
					}
				},
				downOption:{
					use:false
				},
				tabs:[
					{name:'待收货'},
					{name:'已收货'}
				],
				tabActive:0
			}
		},
		computed:{
			//是否具有收货权限
			// hasreAuth(){
			// 	let userinfo = JSON.parse(this.vuex_userInfo).user_info
			// 	let obj = this.detail.receiverVoList.find(item => {
			// 		return item.id == userinfo.id
			// 	})
			// 	return obj ? true : false
			// }
			
		},
		watch:{
			detail:{
				handler(v){
					if(v) this.refresh()
				},
				immediate:true
			}
		},
		methods:{
			tabChange(e){
				this.tabActive = e
				this.refresh()
			},
			loadscroll(){
				this.mescroll.triggerUpScroll()
			},
			//下拉刷新
			refresh(){
				let curPageData = this.detail.records;
				let toReceive = [],Received = []
				curPageData.map(item => {
					item.checked = false
					if(item.status == 1 || item.status == 2) toReceive.push(item)
					if(item.status == 3) Received.push(item)
				})
				this.carList = this.tabActive == 0 ? toReceive : Received;
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$nextTick(() => {
					let curPageData = this.detail.records;
					let totalSize = 1,toReceive = [],Received = []
					curPageData.map(item => {
						item.checked = false
						if(item.status == 0) toReceive.push(item)
						if(item.status == 1 || item.status == 2) Received.push(item)
					})
					let curPageLen = this.tabActive == 0 ? toReceive.length : Received.length;
					this.carList = this.tabActive == 0 ? toReceive : Received;
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
			},
			//拨打电话
			call(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			//编辑
			linkToEdit(index){
				this.$u.vuex('vuex_receiveInfo',this.carList[index])
				uni.navigateTo({
					url:'/pages/order/edit'
				})
			},
			checkboxChange(e,index){
				this.$set(this.carList[index],'checked',e.value)
				let num = 0,checkedbudget=0;
				this.carList.map(item => {
					if(item.checked){
						num++
						checkedbudget += item.realWeight
					}
				})
				this.checkall = num == this.carList.length ? true : false
				this.checkedbudget = checkedbudget.toFixed(2)
			},
			chackAll(e){
				let checkedbudget=0;
				this.carList.map(item =>{
					item.checked = e.value
					if(item.checked) checkedbudget += item.realWeight
				})
				this.checkedbudget = checkedbudget.toFixed(2)
			},
			//车辆详情
			showCarDetail(item){
				this.truckDetail = item
				this.carDetailShow = true
			},
			submit(){
				let ids = []
				this.carList.map(item => {
					if(item.checked){
						ids.push(item.id)
					}
				})
				if(ids.length == 0){this.$u.toast('请至少选择一辆车');return false}
				uni.showLoading({
					mask:true
				})
				this.$u.api.verify({id:ids}).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return
					}
					this.$u.toast('提交收货成功')
					this.$emit('confirm')
					uni.hideLoading()
				}).catch(() => {uni.hideLoading()})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step3-container{
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}
	.box{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		.title{
			font-size: 34rpx;
			font-weight: 800;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			padding-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&.no-border-bottom{
				border-bottom: none;
			}
		}
		.list{
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				position:relative;
				.label{
					color: #798188;
				}
				.value{
					color:#333;
					max-width: 400rpx;
					.tel{
						margin-left: 20rpx;
						color: #1378FF;
					}
				}
			}
		}
		.concrete-list{
			.c-item{
				display: flex;
				flex-direction: column;
				padding: 20rpx 0;
				border-bottom:1px solid rgba(188, 198, 218, 0.3);
				.name{
					font-size: 28rpx;
					color: #1378FF;
					margin-bottom: 12rpx;
				}
				.bd{
					display: flex;
					align-items: center;
					view{
						width: 50%;
						font-size: 24rpx;
						color: #666D7F;
						text{
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
			.summary{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 24rpx;
				.t{
					font-size: 34rpx;
					font-weight: 600;
				}
				.v{
					font-size: 34rpx;
					font-weight: 600;
					color: #1378FF;
				}
			}
		}
		.info-list{
			display: flex;
			.item{
				width: 25%;
				display: flex;
				flex-direction: column;
				border-right: 1px solid rgba(212, 226, 237, 0.6);
				box-sizing: border-box;
				margin-right: 20rpx;
				&:last-child{
					border-right: none;
					margin-right: 0;
				}
				.v{
					font-size: 36rpx;
					font-weight: 500;
					color: #FF6600;
					.tips{
						font-size: 26rpx;
						margin-left: 3px;
					}
				}
				.t{
					font-size: 24rpx;
					color: #888;
					margin-top: 6rpx;
					
				}
			}
		}
	}
	.car-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-top: 10rpx;
		.title{
			display: flex;
			align-items: center;
			&>view{
				font-size: 28rpx;
				margin-right: 20rpx;
				&.active{
					font-weight: 600;
					font-size: 32rpx;
				}
			}
		}
		.all{
			font-size: 28rpx;
			color: #666D7F;
			text{
				color: #137AFF;
			}
		}
	}
	.car-list{
		
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding:20rpx;
			position: relative;
			.status{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 16rpx;
				height: 40rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 20rpx;
				right: 0;
				top: 0;
				&.primary{
					background: rgba(19, 120, 255, 0.1);
					color: #1378FF;
				}
				&.success{
					background: rgba(39, 183, 16, 0.1);
					color: #27B710;
				}
				&.error{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.warning{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.info{
					background: rgba(144, 147, 153,0.1);
					color: #909399;
				}
			}
		}
		.item-body{
			flex: 1;
		}
		.item-hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6rpx;
			.number{
				font-size: 28rpx;
				font-weight: 600;
			}
			.startTime{
				font-size: 26rpx;
				color: #666D7F;
			}
		}
		.item-bd{
			display: flex;
			align-items: center;
			.bd-l{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				view{margin-top: 12rpx;}
				.label{
					color: #999;
					font-size: 24rpx;
				}
				.value{
					font-size: 26rpx;
					margin-right: 24rpx;
				}
			}
			.bd-r{
				width: 56rpx;
				height: 56rpx;
				background: linear-gradient(148deg, #FCA726 0%, #FF6E28 100%);
				border-radius: 100%;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}
	.op-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:14rpx 30rpx 0;
		padding-bottom:calc(14rpx + env(safe-area-inset-bottom)); 
		box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.15);
		.btn-box{
			display: flex;
			align-items: center;
			.all{
				font-size: 28rpx;
				color: #28282C;
				text{
					color: #1378FF;
				}
			}
			.btn{
				height: 72rpx;
				background: linear-gradient(133deg, #12A6FF 0%, #1378FF 100%);
				border-radius: 44rpx;
				padding: 0 38rpx;
				line-height: 72rpx;
				font-size: 34rpx;
				color: #fff;
				margin-left: 30rpx;
			}
		}
	}
	.cae-detail-name{
		font-size: 34rpx;
		font-weight: 600;
		padding: 30rpx 30rpx;
	}
	.car-detail-list{
		padding: 0 30rpx 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		.label{
			color: #666D7F;
		}
		.value{
			color: #333;
		}
		&:last-child{
			padding-bottom: 30rpx;
		}
	}
</style>